<template>
  <section :class="colors">
    <h2 class="book_name">{{chapter.booksVo != undefined ? chapter.booksVo.booksName : ''}}</h2>

    <div class="content" v-bind:style="{fontSize: fs + 'px'}">
      <h2 class="chapter">{{chapter.chapterName}}</h2>
      <template v-if="chapter.chapterContentVo != undefined">
        <div
          class="content-box"
          :style="{lineHeight: (Number(fs) + 6) + 'px'}"
          v-html="chapter.chapterContentVo.content"
        ></div>
      </template>
      <template v-else>
        <div class="content-box">
          <div class="pay-box">
            <h2>该书为非包月书， 可享受9折包月折扣</h2>
            <div class="buttons">
              <div class="price">价格: {{chapter.costGold}} 金币</div>
              <div class="btns">
                <router-link tag="button" to="/list/pay" class="btn btn-block" stop>购买本章</router-link>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!--广告设置 start-->
    <reader-ads></reader-ads>
    <!--广告设置 end-->

    <div class="d-flex btns">
      <div class="btn flex-1 text-center" v-if="lastChapterId  != 0" @click.stop="prev">上一章</div>
      <router-link
        tag="div"
        class="btn flex-1 text-center"
        :to="'/books/chapter/' + booksId"
        stop
      >目录</router-link>
      <div class="btn flex-1 text-center" v-if="nextChapterId  != 0" @click.stop="next">下一章</div>
    </div>
  </section>
</template>

<script>
import { findChapterContentByBookIdAndChapter } from "api/ChapterApi";

import ReaderAds from "./ReaderAds";

import bus from "utils/EventBus";
import { show } from "utils/Base";

import { mapState } from "vuex";

export default {
  name: "ReaderContent",
  components: {
    ReaderAds
  },
  props: {
    booksId: String,
    chapterId: String
  },
  data() {
    return {
      chapter: {},
      lastChapterId: 0,
      nextChapterId: 0
    };
  },
  computed: {
    ...mapState(["fs", "colors"])
  },
  methods: {
    findChapterContentByBookIdAndChapter() {
      findChapterContentByBookIdAndChapter({
        booksId: this.booksId,
        chapterId: this.chapterId
      }).then(res => {
        if (res.meta.success) {
          this.chapter = res.data;
          this.lastChapterId = res.data.lastChapterId;
          this.nextChapterId = res.data.nextChapterId;
          bus.$emit("sendChapterId", this.lastChapterId, this.nextChapterId);
        }
      });
    },
    prev() {
      if (this.lastChapterId == 0) {
        show("当前已经是第一章");
        return;
      }
      this.$router.replace(
        `/books/reader/${this.booksId}/${this.lastChapterId}`
      );
    },
    next() {
      if (this.nextChapterId == 0) {
        show("当前已经是最后一章");
        return;
      }
      this.$router.replace(
        `/books/reader/${this.booksId}/${this.nextChapterId}`
      );
    }
  },
  created() {
    this.findChapterContentByBookIdAndChapter();
  },
  watch: {
    chapterId(newChapterId) {
      this.chapterId = newChapterId;
      this.findChapterContentByBookIdAndChapter();
    }
  }
};
</script>
<style lang="stylus" scoped>
section {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100%;

  .book_name {
    padding: 3vw;
    font-size: 14px;
  }

  .chapter {
    padding: 10vw 5vw;
    font-size: 30px;
  }

  .content-box {
    padding: 0 3vw;

    .pay-box {
      min-height 200px
      h2 {
        margin 3vw 0 10vw 0
        font-size 16px
        text-align center
      }

      .price {
        margin 0 0 6vw 0
      }

      .btn {
        padding 12px
        margin-top 2vw
        background transparent
        border 1px solid #6d6d6d
        border-radius 5px
      }
    }
  }

  .btns {
    margin: 0 0 5vw 0;
  }
}
</style>
